body{
  background-color: black;
  color: white;
  font-family: Sans-Serif; 
  padding: 2%;
}

.center-text{
  text-align: center;   
}

#heading{
  font-family: 'Creepster', cursive;
  font-size: 5em
}


.eyes{
  width: 5em;
  height: 5em;
  border-radius: 50%;
  background-color: white;
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: blinking 3s ease-out 2 5s;
  
}

#eye-container{  
  display: flex;
  justify-content: center;
  margin-bottom: 5%;
}

.pupils{
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: absolute;
  background-color: black;
  animation: moving-pups 2.5s cubic-bezier(.43,-0.45,.45,1.42) infinite;
}

@keyframes moving-pups{
  0% {left: 14%;}
  50%{left: 70%; }
  100% {left: 14%;}  
}

@keyframes blinking{
  0%{transform: rotateX(0deg);}
  20%{transform: rotateX(90deg);}
  60%{transform: rotateX(45deg);}
  70%{transform: rotateX(30deg);}
  80%{transform: rotateX(0deg);}
  100%{transform: rotateX(0deg);}
}